'use client';

import { useState } from 'react';
import Header from './Header';
import ProjectInfo from './ProjectInfo';
import OrientationDiagram from './OrientationDiagram';
import TunnelPlanView from './TunnelPlanView';
import CircularVisualization from './CircularVisualization';
import MediaPlayer from './CircalVisualization/MediaPlayer';

export default function Dashboard() {
  const [activeTab, setActiveTab] = useState(1);
  const [showMediaPlayer, setShowMediaPlayer] = useState(false);

  const handleTabChange = (tabId: number) => {
    setActiveTab(tabId);
  };

  const handleHistoryClick = () => setShowMediaPlayer(true);
  const handleLocalClick = () => setShowMediaPlayer(false);

  return (
    <div className="flex flex-col h-screen bg-gray-100">
      <Header onTabChange={handleTabChange} />

      <div className="flex-1 p-2 grid grid-cols-6 gap-1 grid-rows-8">
        <div className="col-span-6 row-span-2">
          <ProjectInfo 
            onHistoryClick={handleHistoryClick} 
            onLocalClick={handleLocalClick}
          />
        </div>

        <div className="col-span-2 flex flex-col gap-1 row-span-8">
          <OrientationDiagram />
          <TunnelPlanView />
        </div>

        <div className="col-span-4 flex flex-col row-span-8">
          {showMediaPlayer ? (
            <MediaPlayer />
          ) : (
            <CircularVisualization />
          )}
        </div>
      </div>
    </div>
  );
}